<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="diyiliu">
    <link th:href="@{/assets/images/favicon.png}" rel="icon" type="image/png">

    <link th:href="@{/webjars/font-awesome/4.3.0/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/assets/libs/photo-wall/css/main.css}" rel="stylesheet">
    <noscript>
        <link th:href="@{/assets/libs/photo-wall/css/noscript.css}" rel="stylesheet">
    </noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">

    <!-- Main -->
    <section id="main">
        <!-- Items -->
        <div class="items">
            <div class="item intro span-2">
                <h1>旅行日记</h1>
                <p>公开相册</p>
            </div>
            <article class="item thumb" th:each="p:${photos1}" th:classappend="|span-${p.luckyNo}|">
                <h2 th:text="${p.title == null? ' ': p.title}">You really got me</h2>
                <a th:href="@{/image/photo/{img}(img = ${p.fileName})}" class="image"><img th:src="@{/image/photo/{img}(img = ${p.thumbName})}" alt=""></a>
            </article>
        </div>

        <!-- Items -->
        <div class="items">
            <article class="item thumb" th:each="p:${photos2}" th:classappend="|span-${p.luckyNo}|">
                <h2 th:text="${p.title == null? ' ': p.title}">You really got me</h2>
                <a th:href="@{/image/photo/{img}(img = ${p.fileName})}" class="image"><img th:src="@{/image/photo/{img}(img = ${p.thumbName})}" alt=""></a>
            </article>
        </div>
    </section>

    <!-- Footer -->
    <section id="footer">
        <section>
            <p>All Rights Reserved by <strong>DYL</strong>. Designed and Developed by <a href="http://diyiliu.cc">diyiliu.cc</a>.</p>
        </section>

        <section>
            <ul class="icons">
                <li><a href="#" class="icon fa-wechat"><span class="label">微信</span></a></li>
                <li><a href="#" class="icon fa-qq"><span class="label">QQ</span></a></li>
                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
            </ul>
            <ul class="copyright">
                <li>&copy; 回忆录</li>
                <li>Design: <a href="http://diyiliu.cc">DYL</a></li>
            </ul>
        </section>
    </section>

</div>

<!-- Scripts -->
<script th:src="@{/webjars/jquery/3.3.1/dist/jquery.min.js}"></script>
<script th:src="@{/assets/libs/photo-wall/js/jquery.poptrox.min.js}"></script>
<script th:src="@{/assets/libs/photo-wall/js/browser.min.js}"></script>
<script th:src="@{/assets/libs/photo-wall/js/breakpoints.min.js}"></script>
<script th:src="@{/assets/libs/photo-wall/js/util.js}"></script>
<script th:src="@{/assets/libs/photo-wall/js/main.js}"></script>
</body>
</html>